<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css"/>
</head>
<body>
    <div class="aui-content-padded">
        <p>AUI 2.0新增了主题皮肤样式，开发者可以通过修改相关属性来自定义主题样式，该演示为测试演示，修改效果并不完全。</p>
    </div>
    <div class="aui-content-padded">
        <div class="aui-btn" tapmode onclick="setSkin()">设置主题</div>
        <div class="aui-btn aui-btn-info" tapmode onclick="removeSkin()">移除主题</div>
    </div>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list">
            <li class="aui-list-header">
                简单的列表布局
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    Item1
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    Item2
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">Item3</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list">
            <li class="aui-list-header">
                带有右侧箭头
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    Item1
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    Item2
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    Item3
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list">
            <li class="aui-list-header">
                带有其他元素的列表
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">text</div>
                    <div class="aui-list-item-right">信息</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">label</div>
                    <div class="aui-list-item-right">
                        <div class="aui-label aui-label-info">标签</div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">dot</div>
                    <div class="aui-list-item-right">
                        <div class="aui-dot" style="position:relative;top:0; right:0"></div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">badge</div>
                    <div class="aui-list-item-right">
                        <div class="aui-badge" style="position:relative;top:0; left:0">88</div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">badge</div>
                    <div class="aui-list-item-right">
                        <div class="aui-badge" style="position:relative;top:0; left:0"></div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">progress</div>
                    <div class="aui-list-item-right">
                        <div class="aui-progress aui-progress aui-progress-xxs" style="width:5rem;">
                            <div class="aui-progress-bar" style="width: 60%;"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">range</div>
                    <div class="aui-list-item-right">
                        <div class="aui-range">
                            <input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">switch</div>
                    <div class="aui-list-item-right">
                        <input type="checkbox" class="aui-switch" checked>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">radio</div>
                    <div class="aui-list-item-right">
                        <input type="radio" class="aui-radio" checked>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">checkbox</div>
                    <div class="aui-list-item-right">
                        <input type="checkbox" class="aui-checkbox" checked>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">bar-btn</div>
                    <div class="aui-list-item-right">
                        <div class="aui-bar aui-bar-btn aui-bar-btn-sm" style="width:60%;float:right">
                            <div class="aui-bar-btn-item">
                                <i class="aui-iconfont aui-icon-minus"></i>
                            </div>
                            <div class="aui-bar-btn-item">
                                <input type="number" class="aui-input aui-text-center" value="1" >
                            </div>
                            <div class="aui-bar-btn-item">
                                <i class="aui-iconfont aui-icon-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-content">
        <ul class="aui-list">
            <li class="aui-list-header">带有图标、底线缩进</li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-home"></i>
                </div>
                <div class="aui-list-item-inner">
                    这是一个列表项
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-edit"></i>
                </div>
                <div class="aui-list-item-inner">
                    这是一个列表项
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-camera"></i>
                </div>
                <div class="aui-list-item-inner">
                    这是一个列表项
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-skin.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var skin = new auiSkin({
        name:"night",
        skinPath:'../css/aui-skin-night.css',
        default:false,
        beginTime:"20:00",
        endTime:"07:00"
    })
    function setSkin(){
        skin.setSkin();
        api.sendEvent({
            name: 'setSkinEvent'
        });
    }
    function removeSkin(){
        skin.removeSkin();
        api.sendEvent({
            name: 'removeSkinEvent'
        });
    }
</script>
</html>